<?php
/**
 * Created by IDEA.
 * User: dinesh
 * Date: Mar 10, 2012
 * Time: 10:56:46 AM
 */
 $linkpath= CmbBaseConfig::getConfig("link");
 ?>
<!DOCTYPE HTML>

<html>
<head>
</head>
<body onload="doInitGrid();">
 
	
    
	<link rel="STYLESHEET" type="text/css" href="./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/dhtmlxgrid.css">
    <script src="./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
    <script src="./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
    <script src="./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
    <script src="./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>

    <script>
    var mygrid;
    function doInitGrid(){
        mygrid = new dhtmlXGridObject('mygrid_container');
        mygrid.setImagePath("./<?php echo $linkpath['dhtmlx']?>/dhtmlxGrid/codebase/imgs/");
        mygrid.setHeader("Model,Qty,Price");
       // mygrid.setHeader("<div style='width:100%; text-align:left;'>A</div>,B,C");
      //  mygrid.attachHeader(["A","B","C"]);

        mygrid.setInitWidths("100,200,350");
        mygrid.setColAlign("left,left,left");
        mygrid.setSkin("light"); //dhx_skyblue

       // mygrid.setColTypes("ed,ro,price");
 mygrid.setColTypes("ed,ro,ro");
        mygrid.init();
         //mygrid.setColumnHidden(1,true);
      //  mygrid.setColSorting("str,str,int");
        mygrid.attachEvent("onRowSelect",doOnRowSelected);
      //  mygrid.attachHeader("#text_filter,#select_filter,#numeric_filter");
        mygrid.attachFooter("Total quantity,<div id='nr_q'>0</div>,<div id='sr_q'>0</div>", ["text-align:left;"]);
          //mygrid.loadXML("sample.xml");
      mygrid.load("http://localhost/idea/mvc_php/index.php?news/getdata","json") ;

    }
    dhtmlxError.catchError("LoadXML",function(a,b,data){
             // data[0] - request object
             alert(data[0].responseText);// - incorrect server side response
             
        });

     function addRow(){
        var newId = (new Date()).valueOf()
        mygrid.addRow(newId,"",mygrid.getRowsNum())
        mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
    }

    function removeRow(){
        var selId = mygrid.getSelectedId()
        mygrid.deleteRow(selId);
    }

    function doOnRowSelected(rowID,celInd){
        var userdata = mygrid.cells(rowID,0).getValue();
        alert("Selected row ID is "+rowID+"\nUser clicked cell with index data "+userdata);

    }
    </script>
<div id="mygrid_container" style="width:600px;height:250px;"></div>
    <div id="products_grid" style="width:500px;height:200px;"></div>

<button onclick="addRow()">Add Row</button>   <button onclick="removeRow()">Remove Row</button>
</body>
</html>
